<template>
    <el-dialog
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="90%"
    :before-close="cancel"
  >
  <el-table
  :height="calTableHeight()"  
      @selection-change="handleSelectionChange"
      v-loading="loading"
        ref="TableRef"  :data="tableData"
      row-key="menuId"
    >
      <el-table-column
        type="selection"
        :selectable="selectable"
        align="center"
        fixed="left"
      />
      <!-- 租户 -->
      <el-table-column
        :label="$t('租户')"
        align="center"
        show-overflow-tooltip
        prop="distrName"
      />
      <!-- 账单类型 1订单批次sku费用，2批次订单快递费用，3订单批次捆包费用，4订单批次手续费用，5再发货sku费用，6再发货快递费用，7再发货捆包费用，8提前付款，9阶段付款 -->
      <el-table-column
        :label="$t('账单类型')"
        align="center"
        show-overflow-tooltip
        prop="type"
      >
        <template slot-scope="{ row }">
          <span :style="{ color: handlePayTypeColor(row.type) }">
            {{ handlePayType(row.type) }}
          </span>
        </template>
      </el-table-column>
      <!-- 应付款金额 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        :label="$t('应付款金额')"
        prop="payAmount"
      >
        <!-- 应付款金额币种 1RMB 2JPY 3USD -->
        <template slot-scope="{ row }">
          {{ row.payAmount }}
          <span v-if="row.payCurrency == 1">RMB</span>
          <span v-if="row.payCurrency == 2">JPY</span>
          <span v-if="row.payCurrency == 3">USD</span>
        </template>
      </el-table-column>
      <!-- 人民币对日汇率 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="rmbRate"
        :label="$t('人民币对日汇率')"
      />
      <!-- 美元对日汇率 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="usdRate"
        :label="$t('美元对日汇率')"
      />

      <!-- 结账类型 1:线上支付 2:手动结账 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="payType"
        :label="$t('结账类型')"
      >
        <template slot-scope="{ row }">
          <span v-if="row.payType == 1">
            <!-- 线上支付 -->
            {{ $t("线上支付") }}
          </span>
          <span style="color: orange" v-if="row.payType == 2">
            <!-- 手动结账 -->
            {{ $t("手动结账") }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        show-overflow-tooltip
        prop="payCurrency"
        label="应付款金额币种"
      >
        <template slot-scope="{ row }">
          <span v-if="row.payCurrency == 1">RMB</span>
          <span v-if="row.payCurrency == 2">JPY</span>
          <span v-if="row.payCurrency == 3">USD</span>
        </template>
      </el-table-column> -->
      <!-- 账单生成时间 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="createTime"
        :label="$t('账单生成时间')"
      />
      <!-- 是否结账 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="paid"
        :label="$t('是否结账')"
      >
        <template slot-scope="{ row }">
          <span v-if="row.paid == 1">
            <!-- 已支付 -->
            {{ $t("是") }}
          </span>
          <span v-if="row.paid == 0">
            <!-- 未支付 -->
            {{ $t("否") }}
          </span>
        </template>
      </el-table-column>
      <!-- 支付日期 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="payTime"
        :label="$t('支付日期')"
      />
      <!-- 支付金额修改备注 -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="payAmountUpdateRemark"
        :label="$t('支付金额修改备注')"
      />
     
    </el-table>

    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>

</template>

<script>
import { useDict } from "@/utils/useDict";
import {
  payCashierConfig,
  toPay,
  handBeforePay,
} from "@/api/distribution/sku/sellerApplicationList";
import {
  billList,
  batchBillPayInfo,
  getBillDetails,
  batchBillPayHand,
  getDistrList,
} from "@/api/bill/seller";
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * data
     */
    data: {
      type: Array,
      default: () => [],
    },
    /**
     * 标题
     */
    title: {
      type: String,
      required: true,
    },
    /**
     * type
     */
    type: {
      type: [String, Number],
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  components: {
  },
  data() {
    return {
      showSearch: false,

      /**
       * 租户列表
       */
      distrList: [],
      payStatus: false,
      payTypeList: [],
      payFormData: {},
      cloudProductPay: false,
      /**提前付款数据列表 */
      anticipatedPaymentList: [],
      /**详情信息 */
      detailInfo: {
        /**显示详情 */
        show: false,
        type: "",
        title: "",
        data: [],
        query: {},
      },

      /**
       * 支付类型字典
       */
      pay_type_list: [],

      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        timeBetween: [],
        pageNum: 1,
        pageSize: 10,
        type: "",
      },
    };
  },
  created() {
    this.getList();
    useDict("pay_type").then(({ pay_type }) => (this.pay_type_list = pay_type));
    this.getDistrList();
  },
  methods: {
    /**
     * 获取租户
     */
    getDistrList() {
      getDistrList().then((res) => {
        // console.log(`res ==>`, res);
        this.distrList = res.rows;
      });
    },
    selectable(row) {
      if (row.paid == 1) {
        return false;
      } else {
        return true;
      }
    },
    /**线下支付 */
    confirmPayment() {
      batchBillPayHand({ id: this.payFormData.businessId }).then((res) => {
        const { code, data, msg } = res;
        if (code == 200) {
          this.$message({ type: 'success', message: msg})
;
          this.getList();
        }
      });
    },
    checkData(data) {
      this.payStatus = !this.payStatus;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let payData = {
        businessType: this.payFormData.businessType,
        businessId: this.payFormData.businessId,
        payChannel: data.payChannel,
        orderAmount: this.payFormData.orderAmount,
        description: "",
        attach: this.payFormData.attach,
        payPayDescription: [],
      };
      toPay(payData)
        .then((res) => {
          loading.close();
          window.open(res.data.pay_url);
          setTimeout(() => {
            this.getList();
          }, 1000);
        })
        .catch((e) => {
          loading.close();
        });
    },
    cloudProductPayCancel() {
      this.cloudProductPay = !this.cloudProductPay;
      this.getList();
    },
    /**提前付款选择 */
    handleSelectionChange(value) {
      this.anticipatedPaymentList = value;
    },
    // 卖家提前付款
    submitFormDataPayList() {
      if (this.anticipatedPaymentList.length > 0) {
        this.cloudProductPay = true;
        // 获取支付方式
        payCashierConfig().then((res) => {
          this.payTypeList = res.data;
        });
        let iDFromlList = [];
        this.anticipatedPaymentList.forEach((item) =>
          iDFromlList.push(item.id)
        );
        // 获取支付数据
        batchBillPayInfo({ idList: iDFromlList }).then((res) => {
          this.payFormData = res.data;
        });
      } else {
        // this.$message.error("请选择账单");
        this.$message.error(this.$t("请选择账单"));
      }
    },
    handleDetail(row) {
      // console.log(` ==>`, JSON.parse(JSON.stringify(row)));
      // console.log(` ==>`, JSON.parse(JSON.stringify(row)).type);
      const { id, type } = row;
      getBillDetails(id).then((res) => {
        const { code, data } = res;
        if (code === 200) {
          this.detailInfo.show = true;
          this.detailInfo.title = this.handlePayType(type);
          this.detailInfo.type = type;
          console.log(`.type ==>`, type);
          console.log(`.data ==>`, JSON.parse(JSON.stringify(data)));
          const { skuBillData } = data;
          switch (type) {
            case 1 /**订单批次sku费用 type=3 */:
              this.detailInfo.data = data.skuBillData.rows;
              break;
            case 2 /**快递费账单明细 type=2 */:
              this.detailInfo.data = data.expressFeeBundleFeeList;
              break;
            case 3 /**捆包费账单明细 type=3 */:
              this.detailInfo.data = data.bundleFeeList;
              break;
            case 4 /**订单批次手续费用 type=4 */:
              this.detailInfo.data = data.handlingFeeList;
              break;

            case 8 /**提前付款 type=8 */:
              data.sellerApplyVo.remark = data.remark;
              this.detailInfo.data = [data.sellerApplyVo];
              break;

            default:
              break;
          }
          // console.log(
          //   `this.detailInfo.data ==>`,
          //   JSON.parse(JSON.stringify(this.detailInfo.data))
          // );
        }
      });
    },
    handlePayType(type) {
      const index = this.pay_type_list.findIndex((i) => i.dictValue == type);
      if (index > -1) return this.pay_type_list[index].dictLabel;
    },
    handlePayTypeColor(type) {
      switch (type) {
        case 1:
          return "#32CCBC";
        case 2:
          return "#F6416C";
        case 3:
          return "#28C76F";
        case 4:
          return "#F55555";
        case 5:
          return "#9708CC";
        case 6:
          return "#736EFE";
        case 7:
          return "#D939CD";
        case 8:
          return "#3CD500";
        case 9:
          return "#00EAFF";

        default:
          return "#7367F0";
      }
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      const params = JSON.parse(JSON.stringify(this.queryParams));
      const { timeBetween } = params;
      const startTime = timeBetween ? timeBetween[0] : "";
      const endTime = timeBetween ? timeBetween[1] : "";
      delete params.timeBetween;
      const data = {
        ...params,
        startTime,
        endTime,
      };
      billList(data).then((res) => {
        this.tableData = res.rows;
        this.pageTotal = res.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach(
        (key) => (this.queryParams[key] = "")
      );
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.payMessage {
  text-align: center;
  font-size: 16px;
  color: black;
  font-weight: 700;
  margin-bottom: 10px;
}

.payAllData {
  height: 250px;
}

.payTitle {
  font-size: 24px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;

  color: black;
}

.payList {
  height: 60px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}

.payList:hover {
  transform: scale(1.1);
}

.payContent {padding: 5px 0;
  display: flex;
  justify-content: space-around;
}

.adjustment {
  border-radius: 2px;
  padding: 4px;
  background-color: #e1eafc;
}

.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
